<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RecruitAI - 智能招聘助手</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --secondary: #8b5cf6;
      --accent: #06b6d4;
      --success: #10b981;
      --warning: #f59e0b;
      --error: #ef4444;
      --bg-primary: #0f0f23;
      --bg-secondary: #1a1a2e;
      --bg-card: rgba(255, 255, 255, 0.05);
      --bg-glass: rgba(255, 255, 255, 0.1);
      --text-primary: #ffffff;
      --text-secondary: #a3a3a3;
      --text-muted: #737373;
      --border: rgba(255, 255, 255, 0.1);
      --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
      --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* 动态背景 */
    .bg-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .floating-shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.6;
      animation: float 20s infinite ease-in-out;
    }

    .floating-shape:nth-child(1) {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent);
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    .floating-shape:nth-child(2) {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent);
      top: 60%;
      right: 20%;
      animation-delay: -7s;
    }

    .floating-shape:nth-child(3) {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.2), transparent);
      bottom: 10%;
      left: 40%;
      animation-delay: -14s;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      33% { transform: translateY(-20px) rotate(5deg); }
      66% { transform: translateY(10px) rotate(-5deg); }
    }

    /* 导航栏 */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      backdrop-filter: blur(20px);
      background: rgba(15, 15, 35, 0.8);
      border-bottom: 1px solid var(--border);
      padding: 1rem 0;
    }

    .nav-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      color: var(--text-secondary);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-links a:hover {
      color: var(--text-primary);
    }

    .nav-links a.active::before {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      border-radius: 1px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .search-container {
      position: relative;
    }

    .search-input {
      background: var(--bg-glass);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.75rem 1rem 0.75rem 2.5rem;
      color: var(--text-primary);
      width: 280px;
      transition: all 0.3s ease;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .user-avatar:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
    }

    /* 主要内容 */
    .main-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 8rem 2rem 2rem;
    }

    /* 页面标题 */
    .page-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .page-title {
      font-size: 3.5rem;
      font-weight: 800;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
      line-height: 1.1;
    }

    .page-subtitle {
      font-size: 1.25rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .page-meta {
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    /* 卡片系统 */
    .card {
      background: var(--bg-card);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2rem;
      margin-bottom: 2rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .card-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
      color: var(--text-primary);
    }

    /* 统计卡片网格 */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .stat-card {
      background: var(--bg-glass);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
    }

    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2);
    }

    .stat-number {
      font-size: 2.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
    }

    .stat-label {
      font-size: 1rem;
      color: var(--text-secondary);
      margin-bottom: 0.75rem;
    }

    .stat-progress {
      font-size: 0.875rem;
      color: var(--text-muted);
      background: rgba(255, 255, 255, 0.05);
      padding: 0.5rem 1rem;
      border-radius: 20px;
      display: inline-block;
    }

    /* 操作卡片 */
    .actions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .action-card {
      background: var(--bg-glass);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2rem;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .action-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .action-card:hover::before {
      opacity: 1;
    }

    .action-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-hover);
      border-color: var(--primary);
    }

    .action-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      display: block;
    }

    .action-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
    }

    .action-desc {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    /* 按钮 */
    .btn {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: white;
      border: none;
      border-radius: 12px;
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
    }

    /* 记录列表 */
    .record-list {
      list-style: none;
    }

    .record-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
      border-bottom: 1px solid var(--border);
      transition: all 0.3s ease;
    }

    .record-item:hover {
      padding-left: 1rem;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
    }

    .record-item:last-child {
      border-bottom: none;
    }

    .record-content {
      flex: 1;
    }

    .record-title {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .record-meta {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .record-badge {
      background: var(--primary);
      color: white;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .record-badge.warning {
      background: var(--warning);
    }

    .record-badge.success {
      background: var(--success);
    }

    /* 提示卡片 */
    .tip-card {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-radius: 16px;
      padding: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .tip-icon {
      font-size: 2rem;
      flex-shrink: 0;
    }

    .tip-content h3 {
      color: var(--success);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .tip-content p {
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .nav-container {
        padding: 0 1rem;
      }

      .nav-links {
        display: none;
      }

      .search-input {
        width: 200px;
      }

      .main-container {
        padding: 6rem 1rem 2rem;
      }

      .page-title {
        font-size: 2.5rem;
      }

      .stats-grid {
        grid-template-columns: 1fr;
      }

      .actions-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<!-- 动态背景 -->
<div class="bg-animation">
  <div class="floating-shape"></div>
  <div class="floating-shape"></div>
  <div class="floating-shape"></div>
</div>

<!-- 导航栏 -->
<nav class="navbar">
  <div class="nav-container">
    <div class="logo">RecruitAI</div>

    <ul class="nav-links">
      <li><a href="#" class="active">控制台</a></li>
      <li><a href="#">简历分析</a></li>
      <li><a href="#">面试模拟</a></li>
      <li><a href="#">人才库</a></li>
      <li><a href="#">报告中心</a></li>
    </ul>

    <div class="nav-actions">
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索候选人、职位...">
        <span class="search-icon">🔍</span>
      </div>

      <div class="user-avatar">Z</div>
    </div>
  </div>
</nav>

<!-- 主要内容 -->
<div class="main-container">
  <!-- 页面标题 -->
  <div class="page-header">
    <h1 class="page-title">智能招聘控制台</h1>
    <p class="page-subtitle">AI驱动的人才招聘与管理平台</p>
    <div class="page-meta">今日 • 2024年7月2日</div>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-number">156</div>
      <div class="stat-label">待筛选简历</div>
      <div class="stat-progress">今日新增 +23</div>
    </div>

    <div class="stat-card">
      <div class="stat-number">42</div>
      <div class="stat-label">AI匹配推荐</div>
      <div class="stat-progress">匹配度 >85%</div>
    </div>

    <div class="stat-card">
      <div class="stat-number">18</div>
      <div class="stat-label">面试安排</div>
      <div class="stat-progress">本周计划</div>
    </div>

    <div class="stat-card">
      <div class="stat-number">92%</div>
      <div class="stat-label">系统效率</div>
      <div class="stat-progress">较上月 +8%</div>
    </div>
  </div>

  <!-- 快速操作 -->
  <div class="card">
    <h2 class="card-title">智能招聘工具</h2>
    <div class="actions-grid">
      <div class="action-card" onclick="handleAction('resume')">
        <span class="action-icon">🎯</span>
        <div class="action-title">简历智能筛选</div>
        <div class="action-desc">AI自动分析简历匹配度，快速筛选优质候选人</div>
        <button class="btn">立即筛选</button>
      </div>

      <div class="action-card" onclick="handleAction('interview')">
        <span class="action-icon">🤖</span>
        <div class="action-title">AI面试助手</div>
        <div class="action-desc">智能生成面试问题，实时评估候选人表现</div>
        <button class="btn">开始面试</button>
      </div>

      <div class="action-card" onclick="handleAction('talent')">
        <span class="action-icon">👥</span>
        <div class="action-title">人才库管理</div>
        <div class="action-desc">构建企业专属人才池，精准匹配招聘需求</div>
        <button class="btn">进入人才库</button>
      </div>
    </div>
  </div>

  <!-- 最近活动 -->
  <div class="card">
    <h2 class="card-title">最近活动</h2>
    <ul class="record-list">
      <li class="record-item">
        <div class="record-content">
          <div class="record-title">高级Java开发工程师 - 简历筛选完成</div>
          <div class="record-meta">2小时前 • 筛选出8名优质候选人</div>
        </div>
        <div class="record-badge success">已完成</div>
      </li>

      <li class="record-item">
        <div class="record-content">
          <div class="record-title">产品经理面试 - AI评估进行中</div>
          <div class="record-meta">45分钟前 • 候选人：李明</div>
        </div>
        <div class="record-badge warning">进行中</div>
      </li>

      <li class="record-item">
        <div class="record-content">
          <div class="record-title">UI设计师职位 - 新增候选人</div>
          <div class="record-meta">1小时前 • 15份新简历待处理</div>
        </div>
        <div class="record-badge">待处理</div>
      </li>

      <li class="record-item">
        <div class="record-content">
          <div class="record-title">数据分析师面试反馈</div>
          <div class="record-meta">3小时前 • 候选人综合评分：88分</div>
        </div>
        <div class="record-badge success">已完成</div>
      </li>

      <li class="record-item">
        <div class="record-content">
          <div class="record-title">前端开发团队 - 批量简历导入</div>
          <div class="record-meta">昨天 • 成功导入42份简历</div>
        </div>
        <div class="record-badge success">已完成</div>
      </li>
    </ul>
  </div>

  <!-- 智能提示 -->
  <div class="tip-card">
    <span class="tip-icon">🚀</span>
    <div class="tip-content">
      <h3>AI优化建议</h3>
      <p>系统检测到Java开发职位的候选人质量较高，建议加快面试流程。同时，UI设计师职位可以适当提高筛选标准，以获得更匹配的候选人。</p>
    </div>
  </div>
</div>

<script>
  // 页面交互功能
  function handleAction(action) {
    const actions = {
      resume: () => alert('跳转到简历筛选页面'),
      interview: () => alert('启动AI面试助手'),
      talent: () => alert('进入人才库管理')
    };

    if (actions[action]) {
      actions[action]();
    }
  }

  // 搜索功能
  document.querySelector('.search-input').addEventListener('focus', function() {
    this.parentElement.style.transform = 'scale(1.05)';
  });

  document.querySelector('.search-input').addEventListener('blur', function() {
    this.parentElement.style.transform = 'scale(1)';
  });

  // 统计卡片动画
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, observerOptions);

  // 初始化动画
  document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.stat-card, .action-card, .card');
    cards.forEach((card, index) => {
      card.style.opacity = '0';
      card.style.transform = 'translateY(20px)';
      card.style.transition = `all 0.6s ease ${index * 0.1}s`;
      observer.observe(card);
    });
  });

  // 实时数据更新模拟
  setInterval(() => {
    const numbers = document.querySelectorAll('.stat-number');
    numbers.forEach(num => {
      if (!num.textContent.includes('%')) {
        const current = parseInt(num.textContent);
        if (Math.random() > 0.8) { // 20%概率更新
          num.textContent = current + Math.floor(Math.random() * 3);
        }
      }
    });
  }, 30000); // 每30秒更新一次
</script>
</body>
</html>